<script setup>
import { reactive, ref, watch, computed } from 'vue'

const obj = computed(() => ({
  'text-c_pink': true,
}))

const week = {
  pn: 1,
  vt: 2,
  sr: 3,
  cht: 4,
  pt: 5,
  sb: 6,
  vsk: 0,
}

let dayNow = function () {
  if (condition) {
    ref(new Date().getDay())
  }
}

const habits = ref([])

if (localStorage.habit === undefined || localStorage.habit == '') {
  localStorage.habit = [false, false, false, false, false, false, false]
  habits.value = localStorage.habit.split(',')
} else habits.value = localStorage.habit.split(',')

watch(habits.value, () => {
  localStorage.habit = habits.value
})

</script>

<template>
  <div>
    <div>
      <ul class="relative flex justify-between p-4 text-lg">
        <li v-if="week.pn == new Date().getDay()" class="text-c_pink">Пн</li>
        <li v-else>Пн</li>
        <li v-if="week.vt == new Date().getDay()" class="text-c_pink">Вт</li>
        <li v-else>Вт</li>
        <li v-if="week.sr == new Date().getDay()" class="text-c_pink">Ср</li>
        <li v-else>Ср</li>
        <li v-if="week.cht == new Date().getDay()" class="text-c_pink">Чт</li>
        <li v-else>Чт</li>
        <li v-if="week.pt == new Date().getDay()" class="text-c_pink">Пт</li>
        <li v-else>Пт</li>
        <li v-if="week.sb == new Date().getDay()" class="text-c_pink">Сб</li>
        <li v-else>Сб</li>
        <li v-if="week.vsk == new Date().getDay()" class="text-c_pink">Вс</li>
        <li v-else>Вс</li>
      </ul>
    </div>
    <div class="relative flex justify-between p-4 text-lg">
      <input class="ml-1 h-5 w-5 appearance-none border bg-c_litegray duration-500 checked:bg-c_pink" type="checkbox"
        v-for="(item, index) in habits" v-model="habits[index]" />
    </div>
  </div>
</template>

<style>
.dayClass {
  color: #845cee;
}
</style>
